<template>
    <div class="Job">
        <!-- 头部 -->
		<Header :navActive="2" ref="Header"/>
		<!-- 主内容区 -->
		<div class="main w1200 cl">
            <!-- 搜索框 -->
			<div class="searchBox">
				<div class="search">
					<div class="inputBox fl"><input type="text" v-model.trim="search.title" autocomplete="off" placeholder="请输入职位名称或企业名称"/></div>
					<el-button type="primary" class="btn fr" @click="searchClick">搜索</el-button>
				</div>
			</div>
            <!-- 筛选 -->
            <div :class="toggle?'filter open':'filter'">
                <div class="row" v-for="(item,index) in filter" :key="index">
                    <!-- 城市 -->
                    <template v-if="item.id=='1330751004775944193'">
                        <div class="label">{{item.name}}</div>
                        <div class="list">
                            <span :class="jobProvinceAll?'active':''" @click="selectFilter(index,'','')">全国</span>
                            <!--省 begin -->
                            <span v-for="(x,y) in item.blockData" :key="y" :class="x.active?'active':''" @click="selectCity(index,y,x.sourceId,x.level)">{{x.title}}
                                <i :class="filterActive[index].id==x.sourceId&&jobCityChild.length>0&&filterActive[index].childrenActive?'el-icon-arrow-down active':'el-icon-arrow-down'"></i>
                            </span>
                            <!--省 end -->
                            <!--市、区（直辖市时） begin -->
                            <div class="dlist" v-if="jobCityChild.length>0&&filterActive[index].childrenActive">
                                <div class="ditem" :class="jobCityAll?'active':''" @click="selectCity2(index,'','province')">不限</div>
                                <div class="ditem" v-for="(item,index) in jobCityChild" :key="index" :class="item.active?'active':''" @click="selectCity2(index,item.value,item.level)">{{item.label}}</div>
                            </div>
                            <!--市、区 end -->
                        </div>
                    </template>
                    <!-- 行业 -->
                    <template v-else-if="item.id=='1330751171851849729'">
                        <div class="label">{{item.name}}</div>
                        <div class="list">
                            <span :class="filterActive[index].id==''?'active':''" @click="selectFilter(index,'')">不限</span>
                            <span v-for="(x,y) in item.blockData" :key="y" :class="filterActive[index].id==x.value?'active':''" @click="selectIndustry(index,y,x.value)">{{x.label}}
                                <i :class="filterActive[index].id==x.value&&jobIndustryChild.length>0&&filterActive[index].childrenActive?'el-icon-arrow-down active':'el-icon-arrow-down'"></i>
                            </span>
                            <div class="dlist" v-if="jobIndustryChild.length>0&&filterActive[index].childrenActive">
                                <div class="ditem" :class="jobIndustry2Active==''?'active':''" @click="selectIndustry2(index,'')">不限</div>
                                <div class="ditem" v-for="(item,index) in jobIndustryChild" :key="index" :class="jobIndustry2Active==item.value?'active':''" @click="selectIndustry2(index,item.value)">{{item.label}}</div>
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <div class="label">{{item.name}}</div>
                        <div class="list">
                            <span :class="filterActive[index].id==''?'active':''" @click="selectFilter(index,'')">不限</span>
                            <span v-for="(x,y) in item.blockData" :key="y" :class="filterActive[index].id==x.sourceId?'active':''" @click="selectFilter(index,x.sourceId)">{{x.title}}</span>
                        </div>
                    </template>
                </div>
                <div :class="toggle?'toggle open':'toggle'"><span @click="toggleFilter()"><i class="el-icon-arrow-down"></i></span></div>
            </div>
            <!-- 选项卡 -->
            <div class="tabs" id="tabs">
                <div class="item" :class="fieldActive==0?'active':''" @click="field(0,'')">智能匹配</div>
                <div class="item" :class="fieldActive==1?'active':''" @click="field(1,'money')">薪酬最高</div>
                <div class="item" :class="fieldActive==2?'active':''" @click="field(2,'publishTime')">最新发布</div>
            </div>
            <!-- 列表 -->
            <div class="list">
                <div class="item" v-for="(item,index) in list" :key="index">
                    <router-link :to="{name:'JobDetails',query:{id:item.id}}" target="_blank">
                        <div class="title">{{item.title}} <span>发布时间：{{
                            $moment(item.publishTime, "yyyy-MM-DD HH:mm:ss").format(
                                "yyyy-MM-DD"
                            )
                          }}</span></div>
                        <div class="other">
                            <div class="money">{{item.minMoney === 0 && item.maxMoney === 0 ? '薪资面议' : item.money}}</div>
                            <div class="spans">
                                <span>{{item.jobCity_dictText}}</span>
                                <span>{{item.eduLevel_dictText}}</span>
                                <span>{{item.experience}}</span>
                                <span>{{item.needCount}}人</span>
                                <span>{{item.recruitType_dictText}}</span>
                            </div>
                        </div>
                        <div class="company">
                            <div class="text fl">
                                <div class="companyName">{{item.companyName}}</div>
                                <div class="companyOther">
                                    <span>{{item.enNature}}</span>
                                    <span v-if="item.enPersonnel_dictText">{{item.enPersonnel_dictText}}</span>
                                </div>
                            </div>
                            <div class="logo fr">
                                <img :src="item.companyLogo_dictText">
                            </div>
                        </div>
                        <div class="fu">
                            <span v-for="(x,y) in item.companyBenefits" :key="y">{{x}}</span>
                        </div>
                    </router-link>
                    <div class="hover">
                        <el-button type="primary" class="submit" @click="SendResume(item.id)">申请职位</el-button>
                        <el-button type="text" icon="el-icon-star-off" class="collect" @click="collectionDelete(item.id)" v-if="item.collectState==0">取消收藏</el-button>
                        <el-button type="text" icon="el-icon-star-off" class="collect" @click="collectionAdd(item.id)" v-else>收藏职位</el-button>
                    </div>
                </div>
            </div>
            <!-- 暂无数据 -->
            <nodata v-if="list.length==0" />
            <el-pagination background layout="prev, pager, next" hide-on-single-page :current-page="pageNo" :page-size='pageSize' :total="pageTotal" @current-change="handleCurrentChange"></el-pagination>
		</div>
        <!-- 底部 -->
		<Footer />
    </div>
</template>

<script>
    import {baseSearch,block,collectStateList,collectionDelete,collectionAdd,baseData,} from '@/api/api'
	import Header from '@/components/Header.vue'
    import Footer from '@/components/Footer.vue'
    import nodata from '@/components/nodata.vue'
	export default {
		//组件注入
		components: {Header,Footer,nodata},
        //存放数据
        data() {
            return {
                SendResumeFlag:false,//投递简历
                toggle:true,//筛选展开
                filter:[],
                fieldType:'',//智能排序
                fieldActive:0,//智能排序
                areaType:'province',//省市的类型
                search:{
                    title:'',//搜索内容
                    recruitType:'',//招聘类型 0 社招, 1 校招,
                    jobCity:'',//工作地点
                    jobIndustryId:'',//所属行业
                    experience:'',//工作经验
                    eduLevel:'',//学历要求
                    enNature:'',//公司性质
                    enPersonnel:'',//公司规模
                    money:'',//薪资范围
                    majorId:'',//专业id
                },
                pageNo:1,
                pageSize:10,
                pageTotal:1,//总数
                list:[],
                filterActive:[],
                jobIndustry:[],//行业一级
                jobIndustryChild:[],//行业二级
                jobIndustry2Active:'',//行业二级active
                city:[],//所有城市
                jobCityChild:[],//城市二级
                jobCity2Active:'',//城市二级active
                selectCityList:[],//所有选中城市
                jobCityAll:true,//选中城市 不限字段
                jobProvinceAll:true,//选中省份  的全国字段
            }
        },
        //接受父组件传递的值
        props:[],
        //监控data中的数据变化
        watch: {},
        //方法集合
        methods: {
            //展开收缩筛选
            toggleFilter(){
                this.toggle = !this.toggle
            },
            //搜索
            searchClick(){
                this.clearList()
                this.getList()
            },
            //筛选条件
            selectFilter(index,id){
                this.filterActive[index].id = id;
                if(index==0){
                    this.search.recruitType = id
                }
                if(index==1){
                    //全国选中
                    this.jobProvinceAll  = true;
                    this.search.jobCity = id;
                    //传参清空
                    this.selectCityList = [];//获取空串
                    //所有的省份调整为 不选中
                    for(let j = 0;j < this.filter[index].blockData.length;j++){
                        this.filter[index].blockData[j].active = false;
                    }
                    if(id==''){
                        this.jobCityChild = []
                    }
                }
                if(index==2){
                    this.search.jobIndustryId = id
                    if(id==''){
                        this.jobIndustryChild = []
                    }
                }
                if(index==3){
                    this.search.experience = id
                }
                if(index==4){
                    this.search.eduLevel = id
                }
                if(index==5){
                    this.search.enNature = id
                }
                if(index==6){
                    this.search.enPersonnel = id
                }
                if(index==7){
                    this.search.money = id
                }
                this.clearList()
                this.getList()
            },
            //选择行业一级
            selectIndustry(parIndex,index,id){
                if(this.filterActive[parIndex].id!=id){
                    this.filterActive[parIndex].childrenActive = true;
                    this.search.jobIndustryId = id
                    this.jobIndustry2Active = ''
                    this.clearList()
                    this.getList()
                }else{
                    this.filterActive[parIndex].childrenActive = !this.filterActive[parIndex].childrenActive;
                }
                this.filterActive[parIndex].id = id;
                this.jobIndustryChild = this.jobIndustry[index].children
            },
            //选择行业二级
            selectIndustry2(parIndex,id){
                if(id==''){
                    this.search.jobIndustryId = this.filterActive[parIndex].id
                }else{
                    this.search.jobIndustryId = id
                }
                this.jobIndustry2Active = id
                this.clearList()
                this.getList()
            },
            //选择城市一级
            selectCity(parIndex,index,id){
                //当前省份与上一次点击不一致
                if(this.filterActive[parIndex].id != id){
                    //全国改为不选中
                    this.jobProvinceAll = false;
                    //判断当前省份是否选中 不选中则把当前省份改为选中
                    if(!this.filter[parIndex].blockData[index].active){
                       this.filter[parIndex].blockData[index].active = true;
                       //判断当前选中省份是否包含地市  此步骤可以不做  避免垃圾数据
                       for(let i = this.selectCityList.length -1 ; i >= 0 ;i--){
                           if(this.selectCityList[i].startsWith(id.slice(0, 2))){
                               this.selectCityList.splice(i, 1);
                           }
                       }
                       //添加当前省份至选中数组中
                       this.selectCityList.push(id);
                       this.clearList();
                       this.getList();
                    }
                    this.filterActive[parIndex].childrenActive = true;
                    this.jobCity2Active = '';
                }else{
                    //当前省份与上一次点击省份一致
                    if(this.filter[parIndex].blockData[index].active){
                        //样式取反  改为不选中
                        this.filter[parIndex].blockData[index].active = false;
                        //清空当前省份的所有信息
                        for(let i = this.selectCityList.length -1 ; i >= 0 ; i--){
                            if(this.selectCityList[i].startsWith(id.slice(0, 2))){
                                this.selectCityList.splice(i, 1);
                            }
                        }
                    }else{
                        //样式取反  改为选中
                        this.filter[parIndex].blockData[index].active = true;
                        //清空当前省份的所有信息  此步骤可以不做  避免垃圾数据
                        for(let i = this.selectCityList.length-1 ; i >= 0; i--){
                            if(this.selectCityList[i].startsWith(id.slice(0, 2))){
                                this.selectCityList.splice(i, 1);
                            }
                        }
                        //添加当前省份至选中数组中
                        this.selectCityList.push(id);
                    }
                    this.clearList();
                    this.getList();
                    this.filterActive[parIndex].childrenActive = !this.filterActive[parIndex].childrenActive;
                }
                if(this.selectCityList.length == 0 ){
                    this.jobProvinceAll  = true;
                }
                this.filterActive[parIndex].id = id;
                for(let i in this.city){
                    //110000 北京市 120000 天津市 310000 上海市 500000-重庆市
                    if('110000'==id||'120000'==id||'310000'==id||'500000'==id){
                      //  console.log("直辖市特殊处理  dfdsf" )

                        if(id==this.city[i].value){
                         try {
                             this.jobCityChild = this.city[i].children[0].children
                         }catch (e) {
                             console.log("获取直辖市异常")
                         }
                        }

                    }else  if(id==this.city[i].value){
                        this.jobCityChild = this.city[i].children
                    }

                }
                //对已选中的地市信息赋值
                let b = false;
                for(let job = 0; job < this.jobCityChild.length;job ++){
                    if(this.selectCityList.indexOf(this.jobCityChild[job].value) > -1){
                        this.jobCityChild[job].active = true;
                        b = true;
                    }else{
                        this.jobCityChild[job].active = false;
                    }
                }
                if(b){
                   this.jobCityAll = false;
                }else{
                   this.jobCityAll = true;
                }
            },
            //选择城市二级
            selectCity2(parIndex,id,areaType){
                if(id==''){
                    id = this.filterActive[parIndex].id
                }
                let provinceId_two = id.slice(0, 2);
                let provinceId = provinceId_two + "0000";
                if(!id.endsWith("0000") ){
                    if(this.jobCityChild[parIndex].active){
                        this.jobCityChild[parIndex].active = false;
                        let index = this.selectCityList.indexOf(id);
                        if (index > -1) {
                            this.selectCityList.splice(index, 1);
                        }
                        let b = true;
                        for(let j = 0; j < this.selectCityList.length;j ++){
                            if(this.selectCityList[j].startsWith(provinceId_two)){
                                b = false;
                            }
                        }
                        if(b){
                            this.jobCityAll = true;
                            if( this.selectCityList.indexOf(provinceId) == -1){
                                this.selectCityList.push(provinceId);
                            }
                        }
                    }else{
                        if( this.selectCityList.indexOf(id) == -1){
                            this.selectCityList.push(id);
                        }
                        this.jobCityChild[parIndex].active = true;
                        if(this.jobCityAll){
                            this.jobCityAll = false;
                        }
                        var index = this.selectCityList.indexOf(provinceId);
                        if(index > -1){
                            this.selectCityList.splice(index, 1);
                        }
                    }
                }else{
                    this.jobCityAll = true;
                    for(let job = 0; job < this.jobCityChild.length;job ++){
                        var index = this.selectCityList.indexOf(this.jobCityChild[job].value);
                        if (index > -1) {
                            this.jobCityChild[job].active = false;
                            this.selectCityList.splice(index, 1);
                        }
                    }
                    if( this.selectCityList.indexOf(id) == -1){
                        this.selectCityList.push(id);
                    }
                }
                this.jobCity2Active = id

                console.log("=========areaType=====>",areaType);
                this.areaType=areaType;
                //this.'city/country'
                this.clearList()
                this.getList()
            },
            //排序
            field(index,type){
                this.fieldActive = index
                this.fieldType = type
                this.clearList()
                this.getList()
            },
            //投递简历
            SendResume(id){
                if(this.userLoginFlag()){
                    this.$refs.Header.SendResumeFlag = true
                    this.$refs.Header.JobId = id
                }
            },
            //收藏职位
            collectionAdd(id){
                if(this.userLoginFlag()){
                    collectionAdd({
                        'jobId': id
                    }).then(res =>{
                        if(res.code==200){
                            this.$message.success('收藏成功');
                            for(let i in this.list){
                                if(this.list[i].id==id){
                                    this.list[i].collectState = 0
                                }
                            }
                        }else{
                            this.$message.error(res.message);
                        }
                    });
                }
            },
            //取消收藏职位
            collectionDelete(id){
                if(this.userLoginFlag()){
                    collectionDelete({
                        'id': id
                    }).then(res =>{
                        if(res.code==200){
                            this.$message.success('取消收藏成功');
                            for(let i in this.list){
                                if(this.list[i].id==id){
                                    this.list[i].collectState = 1
                                }
                            }
                        }else{
                            this.$message.error(res.message);
                        }
                    });
                }
            },
            //清空列表
            clearList(){
                this.pageNo = 1
                this.list = []
            },

            /**
             * params date <array> 需要修改的json格式的数组
             * params newKey <string> 需要修改成的key值
             * params oldKey <string> 需要被修改的key值
             */
            changeJsonKey(d,  oldKey,newKey) {
                let str = JSON.stringify(d);
                let reg = new RegExp(oldKey, 'g');
              let newStr = str.replace(reg, newKey);

                //let newStr = str.replace(oldKey, newKey);
             //   console.log("===========changeJsonKey==========>",oldKey,newKey,newStr)
                return JSON.parse(newStr);
            },
            //获取列表
            getList(){
                let selectCityStrList = this.selectCityList.join(",");
                console.log("this.selectCityList =========" + this.selectCityList.join(","));
                let selectJobProvinceList = [];
                let selectJobCityList = [];
                let selectJobCountyList = [];
                for(let i = 0; i < this.selectCityList.length; i++ ){
                    let temp = this.selectCityList[i];
                    if(temp.endsWith("0000")){
                        selectJobProvinceList.push(temp);
                    }else{
                        if(temp.startsWith("11") || temp.startsWith("12")
                            ||temp.startsWith("13") || temp.startsWith("50")){
                            selectJobCountyList.push(temp);
                        }else{
                            selectJobCityList.push(temp);
                        }
                    }
                }
                console.log("this.selectJobCountyList =========" + selectJobProvinceList.join(","));
                console.log("this.selectJobCityList =========" + selectJobCityList.join(","));
                console.log("this.selectJobCountyList =========" + selectJobCountyList.join(","));

                let es_query={
                    'type':'job',
                    'title.keywords,companyName.keywords':this.search.title,//搜索内容
                    'recruitType.keywords': this.search.recruitType,//招聘类型 0 社招, 1 校招,
                    'jobProvince.in': selectJobProvinceList.join(","),//工作地点 jobProvince.term -省 jobCity.term -市    jobCounty.term -区
                    'jobCity.in': selectJobCityList.join(","),//工作地点
                    'jobCounty.in': selectJobCountyList.join(","),//工作地点
                    'jobIndustryId.like': '*'+this.search.jobIndustryId+'*',//所属行业
                    'subject.like': this.search.majorId,//所属行业
                    'experience.range': this.search.experience,//工作经验
                    'eduLevel.term': this.search.eduLevel,//学历要求
                    'enNature.term': this.search.enNature,//公司性质
                    'enPersonnel.term': this.search.enPersonnel,//公司规模
                    'money.range': this.search.money,//薪资范围
                    //'bsType.keywords':0,//职位搜索（不含专场）
                    'pageNo':this.pageNo,
                    'pageSize':this.pageSize,
                    'field': this.fieldType,//排序字段 intellect 智能排序
                    'sort': false,//排序方式 true:正序 false:倒序
                };
                /**if('city'==this.areaType){//查询市下面的数据
                    es_query=this.changeJsonKey(es_query, 'jobProvince.term', 'jobCity.term');
                }else  if('district'==this.areaType){//查询区下面的数据
                    es_query=this.changeJsonKey(es_query, 'jobProvince.term', 'jobCounty.term');
                }**/
                //console.log("搜索信息为：",this.areaType,es_query)
                baseSearch(es_query).then(res =>{
                    if(res.code==200){
                        this.pageTotal = res.result.total
                        let list = res.result.records
                        for(let i in list){
                            list[i].money = list[i].minMoney/1000 + 'K-' + list[i].maxMoney/1000 + 'K'
                            if(list[i].minExperience==0&&list[i].maxExperience==0){
                                list[i].experience = '无经验'
                            }else if(list[i].minExperience==0&&list[i].maxExperience==999){
                                list[i].experience = '不限'
                            }else if(list[i].minExperience==null&&list[i].maxExperience==null){
                                list[i].experience = '无经验'
                            }else{
                                list[i].experience = list[i].minExperience + '-' + list[i].maxExperience + '年'
                            }
                        }
                        //判断登录状态 查询收藏状态
                        if(list.length>0&&this.userLoginFlag1()){
                            let ids = ''
                            for(let i in list){
                                ids += list[i].id + ','
                            }
                            //收藏状态
                            collectStateList({
                                'jobId': ids
                            }).then(res =>{
                                if(res.code==200){
                                    for(let i in res.result){
                                        list[i].collectState = res.result[i].collectState
                                    }
                                    this.list = list
                                }
                            });
                        }else{
                            this.list = list
                        }
                    }
                });
            },
            //切换页码
            handleCurrentChange(pageNo){
                this.pageNo = pageNo
                this.list = []
                this.getList();
                document.querySelector('#tabs').scrollIntoView(true)
            },
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {

        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {
            //获取筛选条件
            block({
				'code':'search'
			}).then(res =>{
				if(res.code==200){
                    let arr = res.result.children
                    //行业查询
                    baseData({
                        'clz':'industry'
                    }).then(res =>{
                        if(res.code==200){
                            this.jobIndustry = res.result
                            for(let i in arr){
                                if(arr[i].name=='所属行业'){
                                    arr[i].blockData = res.result
                                }
                                this.filterActive.push({id:"",childrenActive:false})
                            }
                            this.filter = arr;
                            for(let i = 0;i< this.filter.length;i++){
                                if(this.filter[i].id == "1330751004775944193"){
                                    for(let j = 0;j < this.filter[i].blockData.length;j++){
                                        this.filter[i].blockData[j].active = false;
                                    }
                                    break;
                                }
                            }
                            //通过搜索过来
                            if(this.$route.query.search){
                                this.search.title = this.$route.query.search
                                if(this.$route.query.recruitType){
                                    this.search.recruitType = this.$route.query.recruitType
                                    this.search.majorId = this.$route.query.majorId
                                    this.filterActive[0].id = 1;
                                }
                            }
                            //获取列表
                            this.getList()
                        }
                    });
                    //城市列表
                    baseData({
                        'clz':'area'
                    }).then(res =>{
                        if(res.code==200){
                            this.city = res.result
                        }
                    });
				}
            });
        }
    };
</script>
<style lang="scss">
    @mixin text-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    @mixin text-ellipsisclamp($clamp){display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: $clamp;overflow: hidden;}
    @mixin transition{transition: all .3s;}
    .Job{background: #F6F6F6;
        .main{padding-bottom: 40px;
            /* 搜索 */
            .searchBox{width: 850px;height: auto;overflow: hidden;margin: 30px auto;
                .jobs{font-size: 16px;color: #333;margin: 0 0 10px 15px;}
                .search{height: 55px;background: #fff;position: relative;
                    .inputBox{width: 675px;position: relative;z-index: 1;top: 2px;
                        input{width: 100%;height: 51px;line-height: 51px;font-size: 16px;padding: 0 20px;}
                    }
                    .btn{width: 175px;height: 55px;line-height: 55px;font-size: 16px;color: #fff;font-weight: bold;text-align: center;@include transition();position: absolute;right: 0;top: 0;z-index: 1;}
                    &:before{content: "";width: 100%;height: 100%;border:2px solid #E54437;position: absolute;left: 0;top: 0;z-index: 0;}
                }
            }
            .filter{height: 235px;overflow: hidden;background: #fff;padding: 30px;margin-bottom: 30px;position: relative;
                .row{height: auto;overflow: hidden;margin-bottom: 10px;
                    .label{width: 60px;line-height: 28px;float: left;font-size: 14px;color: #999;}
                    .list{width: 1080px;height: auto;overflow: hidden;float: left;
                        span{height: 28px;line-height: 28px;font-size: 14px;color: #333;padding: 0 12px;border-radius: 3px;display: inline-block;margin: 0 0 10px 10px;cursor: pointer;@include transition();
                            &:hover{color: #E54437;}
                            &.active{background: #E54437;color: #fff;
                                i.active{transform: rotate(180deg);}
                            }
                            i{font-size: 10px;margin-left: 5px;vertical-align: 1px;}
                        }
                        .dlist{background: #f6f6f6;margin: 0 0 10px 10px;padding: 20px 10px 10px;
                            .ditem{line-height: 28px;font-size: 14px;color: #333;padding: 0 12px;border-radius: 3px;display: inline-block;margin: 0 0 10px 10px;cursor: pointer;@include transition();
                                &:hover{color: #E54437;}
                                &.active{background: #E54437;color: #fff;}
                            }
                        }
                    }
                    &:last-child{margin: 0;}
                }
                .toggle{width: 100%;height: 25px;line-height: 25px;background: #fff;font-size: 14px;color: #fff;text-align: center;position: absolute;left: 0;bottom: 0;right: 0;margin: auto;
                    span{width: 60px;height: 25px;line-height: 25px;background: #E72618;display: inline-block;cursor: pointer;}
                }
                &.open{height: auto;
                    .toggle i{transform: rotate(180deg);}
                }
            }
            .tabs{height: auto;overflow: hidden;background: #fff;border-bottom: 1px solid #eee;
                .item{width: 120px;height: 50px;line-height: 50px;font-size: 16px;color: #666;text-align: center;cursor: pointer;float: left;
                    &.active{font-weight: bold;background: #E54437;color: #fff;}
                }
            }
            /* 列表 */
            .list{height: auto;overflow: hidden;background: #fff;
                .item{height: auto;overflow: hidden;padding: 20px;display: block;border-bottom: 1px solid #eee;position: relative;
                    a{display: block;}
                    .title{font-size: 16px;color: #333;font-weight: bold;
                        span{font-size: 14px;color: #999;margin-left: 20px;font-weight: normal;}
                    }
                    .other{height: auto;overflow: hidden;margin-top: 13px;
                        .money{font-size: 20px;color: #E72618;float: left;margin-right: 35px}
                        .spans{height: auto;overflow: hidden;
                            span{font-size: 14px;color: #666666;position: relative;padding-right: 12px;margin-left: 12px;
                                &:after{content: "";width: 1px;height: 12px;background: #e8e8e8;position: absolute;right: 0;top: 2px;}
                                &:first-child{margin: 0;}
                                &:last-child:after{display: none;}
                            }
                        }
                    }
                    .company{height: auto;overflow: hidden;position: absolute;right: 30px;top: 35px;
                        .text{height: auto;overflow: hidden;margin-right: 23px;text-align: right;
                            .companyName{font-size: 14px;color: #666;font-weight: bold;@include text-ellipsis()}
                            .companyOther{margin-top: 5px;
                                span{font-size: 13px;color: #666;position: relative;padding-left: 12px;margin-left: 12px;
                                    &:after{content: "";width: 1px;height: 12px;background: #e8e8e8;position: absolute;left: 0;top: 3px;}
                                    &:first-child{margin: 0;}
                                    &:first-child:after{display: none;}
                                }
                            }
                        }
                        .logo{width: 105px;height: 45px;overflow: hidden;
                            img{width: 100%;height: 100%;}
                        }
                    }
                    .fu{height: 25px;overflow: hidden;margin-top: 15px;
                        span{font-size: 12px;color: #74767A;border: 1px solid #eee;padding: 2px 8px 3px;margin: 0 0 8px 8px;background: #F9F9F9;float: left;
                            &:first-child{margin: 0;}
                        }
                    }
                    .hover{width: 400px;height: 100%;padding: 50px 0;position: absolute;background: #fff;right: 0;top: 0;display: none;
                        .el-button{height: 40px;padding: 0 20px;float: right;margin-right: 30px;border-radius: 5px !important;}
                        .collect{color: #999;@include transition();
                            i{font-size: 18px;vertical-align: -1px;}
                            &:hover{color: #E54437;}
                        }
                    }
                    &:hover{
                        .hover{display: block;}
                    }
                }
            }
        }
    }
</style>
